<template>
    <div>
      <div class="bg-white grid-content">
      <el-form :inline="true" :model="yzqkForm" class="demo-form-inline">
        <el-date-picker
          style="top: 15px"
          v-model="value1"
          type="monthrange"
          value-format="yyyy-MM"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions"
          unlink-panels
        >
        </el-date-picker>
        <el-form-item>
          <el-button type="primary" @click="reload">查询</el-button>
          <el-button type="success" @click="exportExcel">下载</el-button>
        </el-form-item>
      </el-form>
    </div>
      <div class="bg-white grid-content">
        <div style="overflow: hidden; ">
          <div class="mytitle">抽油机运行情况分析</div>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData">
            <el-table-column type="index" label="序号" fixed="left">
          </el-table-column>
          <el-table-column align="center" prop="ny" label="年月" fixed="left">
          </el-table-column>
          <el-table-column align="center" prop="jackName" label="抽油机名称" width="92px">
          </el-table-column>
          <el-table-column align="center" prop="dwmc" label="单位名称">
          </el-table-column>

          <el-table-column align="center" label="主机运转情况">
            <el-table-column align="center" prop="yzsjZj" label="主机运转时间" width="92px">
            </el-table-column>
            <el-table-column align="center" prop="sbhyzsjZj" label="主机三保后运转时间" width="120px">
            </el-table-column>
            <el-table-column align="center" prop="dxhyzsjZj" label="主机大修后运转时间" width="120px">
            </el-table-column>
            <el-table-column align="center" prop="zyzsjZj" label="主机总运转时间" width="92px">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="副机运转情况">
            <el-table-column align="center" prop="yzsjFj" label="副机运转时间" width="92px">
            </el-table-column>
            <el-table-column align="center" prop="sbhyzsjFj" label="副机三保后运转时间" width="120px">
            </el-table-column>
            <el-table-column align="center" prop="dxhyzsjFj" label="副机大修后运转时间" width="120px">
            </el-table-column>
            <el-table-column align="center" prop="zyzsjFj" label="副机总运转时间" width="92px">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="完好率">
            <el-table-column align="center" prop="rlts" label="日历天数">
            </el-table-column>
            <el-table-column align="center" prop="whts" label="完好天数">
            </el-table-column>
            <el-table-column align="center" prop="whl" label="完好率%" width="60px">
            </el-table-column>
          </el-table-column>

            <!-- <el-table-column align="center" prop="gxr" label="更新人">
            </el-table-column> -->
            
            <el-table-column align="center" prop="lyl" label="利用率%" width="60px">
            </el-table-column>



          <el-table-column align="center" label="其他">
            <el-table-column align="center" prop="jhsj" label="计划时间">
            </el-table-column>
            <el-table-column align="center" prop="sjkjsj" label="实际开机时间" width="105px">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="bz" label="备注" width="105px">
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination align='right'
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5,10, 20, 30, 40, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

      </div>
    </div>
</template>

  <script>
  import yzqkApi from '@/api/sjtb/scgl/yzqkfx';
  import Bolb from "@/vendor/Blob";
  import Export2Excel from "@/vendor/Export2Excel";
  import XLSX from "xlsx-style";

  export default {
    data() {
      return {
        show:false,//隐藏序列
        pageNo: 1, //当前页码
        pageSize: 10, //每页显示数量
        total: 0, //总数量
        startDate: "",
        endDate: "",
        currentPage: 1,//当前页码
        //时间快捷选择
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        // 表格数据
        tableData: [],
        //excel数据
        // tableData:[],
        // approveStatus:'',
        yzqkForm:{},
        // // table数据总条数
        // tableTotal: 30,
        // // 分页数
        // currentSize: 10,
        // //当前页
        // currentPage: 4

        value1: "",
      };
    },
    created() {
      this.search();
      this.reload();
  },
    mounted(){
      this.filterTime();
    },
    methods: {
        /**
        * 查询列表
        */
        async search() {
          //发送查询请求
          let res = await yzqkApi.getYzqkList(
            this.pageNo,
            this.pageSize,
            this.approveStatus,
            this.startDate,
            this.endDate
          );
          //判断是否成功
          if (res.success) {
            console.log(res.data);
            //赋值
            this.tableData = res.data.records;
            //总数量
            this.total = res.data.total;
          }
        },  

        //报表导出下载
        exportExcel() {
          require.ensure([], async () => {
            const { export_json_to_excel } = require('@/vendor/Export2Excel');//此处把路径要写对
            //复杂表头书写
            //添加表格id
            var myindex = [];
            for (var i = 0; i < this.total; i++) {
              myindex[i] = i + 1
            }
            var newindex = myindex.map(item => {
              console.log(item)
              return {
                index: item
              }
            });

            // //将添加的序号加入到表格中形成新的mergeArr表格
            let mergeArr = [newindex, this.tableData].reduce((prev, curr) => {
              return prev.map((item, index) => {
                return Object.assign(item, curr[index]);
              });
            });
            // var result = Object.assign(newindex,this.tableData)
            console.log('mergeArr', mergeArr);
            console.log('tableData', this.tableData);

            // const tHeader = ['日期', '姓名', '地址'];
            // // 上面设置Excel的表格第一行的标题
            //一级表头
            const multiHeader = [
              ['抽油机运行情况分析','','','','','','','','','','','','','','','','','','','',],
              ['序号','年月','抽油机名称','单位名称','主机运转情况','','','','副机运转情况','','','','完好率','','','利用率%','其他','','备注',]];
            //二级表头
            const header = ['','','','','主机运转时间', '主机三保后运转时间', '主机大修后运转时间', '主机总运转时间', '副机运转时间', '副机三保后运转时间', '副机大修后运转时间', '副机总运转时间', '日历天数', '完好天数', '完好率%','', '计划时间', '实际开动时间',''];
            //表头字段
            const filterVal = ['index', 'ny', 'jackName', 'dwmc', 'yzsjZj', 'sbhyzsjZj', 'dxhyzsjZj', 'zyzsjZj', 'yzsjFj', 'sbhyzsjFj', 'dxhyzsjFj', 'zyzsjFj', 'rlts','whts','whl','lyl','jhsj','sjkjsj','bz'];
            //需要合并的单元格
            const merges = ['A1:S1','A2:A3','B2:B3','C2:C3','D2:D3','E2:H2','I2:L2','M2:O2','P2:P3','Q2:R2','S2:S3'];
            //表头样式
            let headerStyle = ['A1','B1','C1','D1','E1','F1','G1','H1','I1','J1','K1','L1','M1','N1','O1','P1','Q1','R1','S1'];
            // 上面的index、nickName、name是tableData里对象的属性
            console.log(this.tableData);
            // const list = this.tableData;  //把data里的tableData存到list
            // const data = this.formatJson(filterVal, list);
            const list = mergeArr;
            const data = this.formatJson(filterVal, list);
            console.log(111111);
            console.log(list);
            console.log(data);

            export_json_to_excel({
              //header: tHeader,
              multiHeader:multiHeader,
              header:header,
              merges:merges,
              headerStyle:headerStyle  ,
                data: data,
                filename: '抽油机运行情况分析',
                autoWidth: true,
                bookType: 'xlsx'
            });//"列表excel"  是下载后的表名 可修改
            this.$message.success('导出报表成功！')
          })
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => {
            return filterVal.map(j => v[j])
          })
        },
        /*** 当每页数量发生变化时触发该事件 */
        handleSizeChange(size) {
            console.log(size);
            this.pageSize = size;
            //将每页显示的数量交给成员变量
            this.search(this.pageNo, size);
        },
        /*** 当页码发生变化时触发该事件 */
        handleCurrentChange(page) {
            console.log(page);
            this.pageNo = page;
            //调用查询方法
            this.search(page, this.pageSize);
        },
        // 序号计算
        indexMethod (index) {
            // index默认在0开始，这里+1
            return index + 1 + (this.pageNo - 1) * this.pageSize
        },

        // 获取当前日期
        filterTime() {
          var date = new Date();
          var y = date.getFullYear();
          var m = date.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = date.getDate();
          d = d < 10 ? "0" + d : d;
          this.currentTime = y + "-" + m + "-" + d;
        },

        //日期查询点击事件
        reload() {
          this.tableData = [];

          console.log(1010);
          console.log(this.value1[0]); //value1[0] 开始时间 value1[1] 结束时间
          this.startDate = this.value1[0];
          this.endDate = this.value1[1];
          this.search();
          //  console.log(this.value1[0]);
          //this.$refs.table.reload({ page: 1 });
        },
        },

  };
  </script>


  <style lang="scss" scoped>
  // 标题
  .mytitle {
    font-size: larger;
    padding-left: 45%;
    margin-bottom: 16px;
    float: left;
  }

  //按钮组
  .myTime {
    float: right;
  }

  //格子的样式
  .bg-white {
    background: #ffffff;
  }

  .grid-content {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
  }

  .calendar ::v-deep .el-button-group::before {
    display: none;
  }

  .calendar ::v-deep .el-button-group::after {
    display: none;
  }

  // 分割线样式
  .el-divider--horizontal {
    display: block;
    height: 2px;
    width: 100%;
    margin: 24px 0;
  }

  // 表单各项的样式
  .el-form-item {
    margin: 15px 10px 15px 10px;
  }
  </style>
